<template>
    <div ref="container" class="register-container">
        <!-- 粒子特效 -->
        <particles :particlesHeight="particlesHeight"></particles>
        <el-steps :active="active" finish-status="success" process-status="wait" :space="400" align-center
                  :style="{position: 'relative', marginLeft: marginLeft-260 + 'px', bottom: particlesHeight-83 + 'px', marginBottom: -83 + 'px'}">
            <el-step title="基本信息"></el-step>
            <el-step title="个人信息"></el-step>
            <el-step title="确认"></el-step>
        </el-steps>
        <el-card class="box-card animated zoomIn" shadow="always"
                 :style="{height: cardHeight + 'px', width: cardWidth + 'px',  marginLeft: marginLeft+60 + 'px', marginTop: marginTop + 'px', position: 'absolute', top: '0px', background: 'rgba(45,58,75,0.8)'}">
            <form-info ref="formInfo" @activeSteps="activeSteps" @stepDisplay="stepDisplay" :activeSteps="active"></form-info>
            <div style="float: right;">
                <el-button type="info" @click="changeStep('up')" v-if="display.first===false">上一步</el-button>
                <el-button type="info" @click="changeStep('next')" v-if="display.third===false">下一步</el-button>
                <el-button type="danger" @click="submitForm()" v-if="display.third===true">注册</el-button>
                <!--<el-button @click="resetForm()">重置</el-button>-->
            </div>
        </el-card>
    </div>
</template>

<script>
    import particles from '../../components/particles/particles.vue';
    import FormInfo from './components/formInfo';

    export default {
        name: 'register',
        components: {
            particles, FormInfo
        },
        data(){
            return {
                marginLeft: window.innerWidth/2 - 380,
                marginTop: window.innerHeight/2 - 250,
                particlesHeight: window.innerHeight,
                cardHeight: window.innerHeight - 500,
                cardWidth: window.innerHeight - 400,
                firstDisplay: true,
                active: 1,
                display: { first: true, second: false, third: false },
                formName: 'firstDataForm'
            }
        },
        computed: {

        },
        methods: {
            submitForm(){
                this.$refs.formInfo.submitForm();
            },
            activeSteps(val){
                this.active = val;
            },
            stepDisplay(val, formName){
                this.display = val;
                this.formName = formName;
            },
            changeStep(val){
                this.cardClass = { 'box-card' : true, 'animated lightSpeedIn' : true};
                this.$refs.formInfo.changeStep(val);
            },
            resetForm() {
                this.$refs.formInfo.resetForm(this.formName);
            },
        },
        created() {

        },
        mounted() {
            window.onresize = () => {
                return (() => {
                    this.marginLeft = window.innerWidth/2 - 380;
                    this.marginTop = window.innerHeight/2 - 250;
                    this.particlesHeight = window.innerHeight;
                    this.cardHeight = window.innerHeight - 500;
                    this.cardWidth = window.innerHeight - 400;
                })();
            };
        }
    }
</script>

<style>
    @import "./css/register.css";
</style>
